<template>
  <div>
    <el-container>
      <el-header class="login-index">
        <el-row>
          <el-col :span="8">
            <div style="padding-top: 5px;"></div>
            <img  src="../../static/images/my1.jpg" width="50" height="50" style="border-radius: 50%;" />
            <span>用户名：{{userName}}</span>
          </el-col>
          <el-col :span="8">
            <div style="margin-top: 10px;">
              <el-button type="primary" plain round size="small" @click="dialogFormVisible = true"><i class="el-icon-edit"></i></el-button>
              &nbsp;
              <el-button type="primary" plain round size="small" ><i class="el-icon-s-custom"></i></el-button>
              &nbsp;
              <el-button type="primary" plain round size="small" @click="logout()"><i class="el-icon-circle-close"></i></el-button>
            </div>

          </el-col>
        </el-row>
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']" router >

            <template v-for="x in node">
              <el-submenu :index="x.index">
                <template slot="title"><i class="el-icon-s-operation"></i>{{x.name}}</template>
                <template v-for="y in x.children">
                  <el-menu-item :index="y.url">{{y.name}}</el-menu-item>
                </template>
              </el-submenu>
            </template>
          </el-menu>
        </el-aside>
        <el-container >
          <el-main height = "800px">
            <router-view/>
          </el-main>
          <el-footer>&nbsp;</el-footer>
        </el-container>
      </el-container>
    </el-container>

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
      <el-form :model="user">
        <el-form-item label="账户">
          <el-input v-bind:disabled="true" autocomplete="off" v-model="userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.userPassword" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false , update()">确 定</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
  export default{
    name:"indexEle",
    data() {
      return{
        userName:"",
        userId:0,
        
        node:[

          {index:"1",name:"预定管理",children:[{url:"/indexE/hotelTable",name:"座位预定"},
                                                   {url:"/indexE/order",name:"菜品选购"},
                                                   {url:"/indexE/aliPay",name:"订单支付"}]},
          {index:"2",name:"仓库管理",children:[{url:"/indexE/materialsList",name:"材料库存"},
                                                  {url:"/indexE/matSup",name:"进货"},
                                                  {url:"/indexE/billList",name:"订单管理"}]},
          {index:"3",name:"菜品管理",children:[{url:"/indexE/menuList",name:"菜品管理"},
                                                  {url:"/indexE/menuPkgList",name:"套餐管理"}]},
          {index:"4",name:"部门管理",children:[{url:"",name:"选项一"},
                                                  {url:"",name:"选项二"}]},
          {index:"5",name:"会员管理",children:[{url:"/indexE/memberList",name:"会员列表"},
                                                  {url:"",name:"选项二"}]},
          {index:"6",name:"供应商管理",children:[{url:"/indexE/supplierList",name:"供应商列表"},
                                                {url:"/indexE/supplierListYes",name:"已合作供应商列表"}]},
        ],
        user:{
          userAccount:localStorage.getItem("userName"),
          userPassword:""
        },
        dialogFormVisible:false
      }
    },
    methods:{
      logout(){
        this.$router.replace("/login");
      },

      update(){
        console.log(this.user.userAccount)
        var self = this
        $.ajax({
          url:"http://localhost:8080/user/updatePwd",
          type:"post",
          contentType:"application/x-www-form-urlencoded",
          data:self.user,
          success:function (data) {
            alert(data.info)
          }
        })
      },
    },
    mounted() {
      var user = sessionStorage.getItem("user");
      var jsonUser = JSON.parse(user);
      this.userName =  jsonUser.userName;
      this.userId =  jsonUser.userId;
    }
  }
</script>

<style>
  html,body{
    height: 100%;
  }
  .login-index{
  		background-color:#1c77ac;
  		/* background-image:url(../../static/images/bg1.jpg); */
  		background-repeat:no-repeat;
  	/*	//background-position:center top;*/
  		overflow:hidden;
  		height: 100%;
  	}
</style>
